<!DOCTYPE HTML>

<head>
	<title>Login</title>
	<!-- Meta tag Keywords -->
	<meta charset="utf-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
	<meta content="" name="description">
	<meta content="" name="keywords">
	<meta content="" name="author">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />

	<script>
		addEventListener("load", function() {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- Meta tag Keywords -->

	<!-- css files -->
	<link rel="stylesheet" href="css/Login-style.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<!-- ========== FAVICON ========== -->
	<link rel="apple-touch-icon-precomposed" href="images/favicon-apple.png" />
	<link rel="icon" href="images/favicon.png">

	<!-- ========== STYLESHEETS ========== -->
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="revolution/css/layers.css" rel="stylesheet" type="text/css" />
	<link href="revolution/css/settings.css" rel="stylesheet" type="text/css" />
	<link href="revolution/css/navigation.css" rel="stylesheet" type="text/css" />
	<link href="css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
	<link href="css/animate.min.css" rel="stylesheet" type="text/css">
	<link href="css/famfamfam-flags.css" rel="stylesheet" type="text/css">
	<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
	<link href="css/owl.carousel.min.css" rel="stylesheet" type="text/css">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="css/responsive.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/backend01.css">

	<!-- ========== ICON FONTS ========== -->
	<link href="fonts/font-awesome.min.css" rel="stylesheet">
	<link href="fonts/flaticon.css" rel="stylesheet">

	<!-- ========== GOOGLE FONTS ========== -->
	<link href="./css/fonts.googleapis.comcss.css" rel="stylesheet">
	<!-- Font-Awesome-Icons-CSS -->
	<!-- //css files -->

	<!-- web-fonts -->
	<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext" rel="stylesheet">
	<!-- //web-fonts -->
</head>

<body>
	<!-- 页首 -->
	<!-- ========== TOP MENU ========== -->
	<div class="top_menu">
		<div class="container">
			<div class="welcome_mssg hidden-xs">
				欢迎登录青云庭院酒店后台
			</div>
			<ul class="top_menu_right">
				<li><i class="fa fa-phone"></i><a href="tel:18475555555"> 1-888-123-4567 </a></li>
				<li class="email hidden-xxs"><i class="fa fa-envelope-o "></i> <a href="mailto:contact@site.com">contact@site.com</a></li>
				<li class="language-switcher">
					<nav class="dropdown">
						<a href="#" class="dropdown-toggle select" data-hover="dropdown" data-toggle="dropdown">
							<i class="famfamfam-flag-cn "></i>中国<b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#"><i class="famfamfam-flag-us "></i>美国</a></li>
							<li><a href="#"><i class="famfamfam-flag-de "></i>德国</a></li>
							<li><a href="#"><i class="famfamfam-flag-jp "></i>日本</a></li>
							<li><a href="#"><i class="famfamfam-flag-ru "></i>俄罗斯</a></li>
							<li><a href="#"><i class="famfamfam-flag-fr "></i>法国</a></li>
							<li><a href="#"><i class="famfamfam-flag-no "></i>挪威</a></li>
							<li><a href="#"><i class="famfamfam-flag-sg"></i>新加坡</a></li>
							<li><a href="#"><i class="famfamfam-flag-cn"></i>中国</a></li>
						</ul>
					</nav>
				</li>
				<?php if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) : ?>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-hover="dropdown"><i class="fa fa-user"></i> 欢迎，<?php echo $_SESSION['username']; ?></a>
					</li>
					<li><a href="logout.php"><i class="fa fa-sign-out"></i>退出</a></li>
				<?php else : ?>
					<li><a href="login.php">登录</a></li>
					<li><a href="login.php">注册</a></li>
				<?php endif; ?>
				<!-- <li><a href="backend01.php">酒店后台</a></li> -->
				<?php if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true && $_SESSION['role'] !== "顾客") : ?>
					<li><a href="backend01.php">酒店后台</a></li>
				<?php endif; ?>
			</ul>
		</div>
	</div>

	<!-- =========== PAGE TITLE ========== -->
	<div class="page_title gradient_overlay" style="background: url(images/page_title_bg.jpg);">
		<div class="container">
			<div class="inner">
				<div class="row">
					<div class="col-md-6 col-sm-6">
						<h1>青云庭院酒店登录</h1>
						<ol class="breadcrumb">
							<li><a href="index.php">主页</a></li>
							<li>经理</li>
							<li>员工</li>
						</ol>
					</div>
					<div class="col-md-6 col-sm-6">
						<h2 class="titleh3" style="float: right; ">欢迎登录青云庭院酒店 !</h2>

					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 页中 -->
	<div class="main-bg">
		<!-- //title -->
		<div class="sub-main-w3">
			<div class="image-style">

			</div>
			<!-- vertical tabs -->
			<div class="vertical-tab">
				<div id="section1" class="section-w3ls">
					<input type="radio" name="sections" id="option1" checked>
					<label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
					<article>
						<form id="login-form" action="" method="post">
							<h3 class="legend">请登录</h3>
							<div class="input">
								<span class="fa fa-phone" aria-hidden="true"></span>
								<input type="tel" placeholder="请输入电话号码" name="phone" id="phone" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input type="password" placeholder="请输入密码" name="password" id="password" required />
							</div>
							<button type="submit" class="btn submit" id="login-btn">登录</button>
							<a href="#section3" class="bottom-text-w3ls">忘记密码？</a>
						</form>
					</article>
				</div>
				<div id="section2" class="section-w3ls">
					<input type="radio" name="sections" id="option2">
					<label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
					<article>
						<form action="backend/api/registrationBackendPage.php" method="post" onsubmit="return validateRegistrationForm()" id="registrationForm">
							<h3 class="legend">请注册</h3>
							<div class="input">
								<span class="fa fa-user-o" aria-hidden="true"></span>
								<input type="text" placeholder="姓名" name="name" required />
							</div>
							<div class="input">
								<span class="fa fa-phone" aria-hidden="true"></span>
								<input type="tel" placeholder="请输入电话号码" name="phone" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input type="password" placeholder="请输入密码" name="password" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input type="password" placeholder="请再次输入密码" name="confirmPassword" required />
							</div>
							<button type="submit" class="btn submit">注册</button>
						</form>
					</article>
				</div>
				<div id="section3" class="section-w3ls">
					<input type="radio" name="sections" id="option3">
					<label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码?</label>
					<article>
						<form action="#" method="post" id="resetPasswordForm" onsubmit="return validateResetPasswordForm()">
							<h3 class="legend last">重置密码</h3>
							<p class="para-style">在下面输入您的电话号码，我们将向您发送一封短信说明书</p>
							<p class="para-style-2"><strong>需要帮助吗？</strong> 了解有关如何 <a href="#"> 找回密码</a></p>
							<div class="input">
								<span class="fa fa-phone" aria-hidden="true"></span>
								<input type="tel" placeholder="请输入您的电话号码" name="phone" required />
							</div>
							<button type="submit" class="btn submit last-btn">重置密码</button>
						</form>
					</article>
				</div>
			</div>
			<!-- //vertical tabs -->
			<div class="clear"></div>
		</div>
	</div>

	<script>
		function validateLoginForm() {
			var phone = document.querySelector('#section1 input[name="phone"]').value;
			var password = document.querySelector('#section1 input[name="password"]').value;
			if (phone.trim() === "") {
				alert("请输入电话号码");
				return false;
			}
			if (!validatePhone(phone)) {
				alert("电话号码格式不正确");
				return false;
			}
			if (password.trim() === "") {
				alert("请输入密码");
				return false;
			}
			return true;
		}
		function validateRegistrationForm() {
			var name = document.querySelector('#section2 input[name="name"]').value;
			var phone = document.querySelector('#section2 input[name="phone"]').value;
			var password = document.querySelector('#section2 input[name="password"]').value;
			var confirmPassword = document.querySelector('#section2 input[name="confirmPassword"]').value;
			if (name.trim() === "") {
				alert("请输入姓名");
				return false;
			}
			if (phone.trim() === "") {
				alert("请输入电话号码");
				return false;
			}
			if (!validatePhone(phone)) {
				alert("电话号码格式不正确");
				return false;
			}
			if (password.trim() === "") {
				alert("请输入密码");
				return false;
			}
			if (confirmPassword.trim() === "") {
				alert("请再次输入密码");
				return false;
			}
			if (password !== confirmPassword) {
				alert("两次输入的密码不一致");
				return false;
			}
			return true;
		}
		function validateResetPasswordForm() {
			var phone = document.querySelector('#section3 input[name="phone"]').value;
			if (phone.trim() === "") {
				alert("请输入电话号码");
				return false;
			}
			if (!validatePhone(phone)) {
				alert("电话号码格式不正确");
				return false;
			}
			return true;
		}
		function validatePhone(phone) {
			var phoneRegex = /^1[0-9]{10}$/;
			return phoneRegex.test(phone);
		}
	</script>


	<!-- 页脚 -->
	<!-- ========== FOOTER ========== -->
	<footer>
		<div class="inner">
			<div class="container">
				<div class="row">
					<div class="col-md-3 col-sm-6 widget">
						<div class="about">
							<a href="index.php"><img class="logo" src="images/logo.svg" height="32" alt="Logo"></a>
							<p>“绿树掩映，清风拂面，尽享雅致之旅。欢迎莅临我们的酒店，体验至臻奢华与无与伦比的服务。让我们将您的每一个细节需求化为巧夺天工的菁华。</p>
							<p>为您营造一个温馨、舒适的家外之家。无论是商务旅行还是休闲度假，我们的酒店始终以您的满意为首要目标。</p>
						</div>
					</div>
					<div class="col-md-3 col-sm-6 widget">
						<h5>最新消息</h5>
						<ul class="blog_posts">
							<li><a href="blog-post.php">在希腊活出你的神话</a> <small>AUGUST 13, 2017</small>
							</li>
							<li><a href="blog-post.php">青云庭院图片</a> <small>AUGUST 16, 2017</small>
							</li>
							<li><a href="blog-post.php">青云庭院家庭聚会</a> <small>SEPTEMBER 15,
									2017</small></li>
						</ul>
					</div>
					<div class="col-md-3 col-sm-6 widget">
						<h5>相关链接</h5>
						<ul class="useful_links">
							<li><a href="#">关于我们</a></li>
							<li><a href="#">联系我们</a></li>
							<li><a href="#">历史</a></li>
							<li><a href="#">图库</a></li>
							<li><a href="#">位置</a></li>
						</ul>
					</div>
					<div class="col-md-3 col-sm-6 widget">
						<h5>联系我们</h5>
						<address>
							<ul class="address_details">
								<li><i class="glyphicon glyphicon-map-marker"></i> 25, Navagio Zakynthos， 希腊
								</li>
								<li><i class="glyphicon glyphicon-phone-alt"></i> Phone: +86-153-033-038 </li>
								<li><i class="fa fa-fax"></i> Fax: 800 123 3456</li>
								<li><i class="fa fa-envelope"></i> Email: <a href="mailto:info@site.com">contact@site.com</a></li>
							</ul>
						</address>
					</div>
				</div>
			</div>
		</div>
		<div class="subfooter">
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-sm-6">
						<div class="copyrights">
							Copyright &copy; 2023.Company name All rights reserved
						</div>
					</div>
					<div class="col-md-6 col-sm-6">
						<div class="social_media">
							<a class="facebook" data-original-title="Facebook" data-toggle="tooltip" href="#"><i class="fa fa-facebook"></i></a>
							<a class="twitter" data-original-title="Twitter" data-toggle="tooltip" href="#"><i class="fa fa-twitter"></i></a>
							<a class="googleplus" data-original-title="Google Plus" data-toggle="tooltip" href="#"><i class="fa fa-google-plus"></i></a>
							<a class="pinterest" data-original-title="Pinterest" data-toggle="tooltip" href="#"><i class="fa fa-pinterest"></i></a>
							<a class="linkedin" data-original-title="Linkedin" data-toggle="tooltip" href="#"><i class="fa fa-linkedin"></i></a>
							<a class="instagram" data-original-title="Instagram" data-toggle="tooltip" href="#"><i class="fa fa-instagram"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>

	</div>

	<!-- ========== BACK TO TOP ========== -->
	<div id="back_to_top">
		<i class="fa fa-angle-up" aria-hidden="true"></i>
	</div>

	<!-- ========== NOTIFICATION ========== -->
	<div id="notification"></div>
	<script type="text/javascript" src="js/backend01.js"></script>
	<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>


	<script>
		$(document).ready(function() {
			// 注册
			$('#registrationForm').submit(function(event) {
				event.preventDefault();
				// 获取表单数据
				var formData = $(this).serialize();
				console.log(formData);
				$.ajax({
					type: 'POST',
					url: 'backend/api/registrationBackendPage.php',
					data: formData,
					success: function(response) {
						// 请求成功时的操作
						console.log(response); // 可以在控制台打印服务器的响应信息
						// 可以在这里进行页面跳转或显示成功消息等操作
						// 跳转到
						window.location.href = 'Login.php';
					},
					error: function(xhr, status, error) {
						// 请求失败时的操作
						console.log(xhr.responseText); // 可以在控制台打印错误信息
					}
				});
			});
			// 登录
			$('#login-form').on('submit', function(e) {
				e.preventDefault();
				var phone = $('#phone').val();
				var password = $('#password').val();
				console.log(phone, password);
				$.ajax({
					url: 'backend/api/loginBackendPage_1.php',
					method: 'POST',
					data: {
						phone: phone,
						password: password
					},
					success: function(response) {
						console.log(response);
						console.log(typeof response)
						if (response == 'success') {
							window.location.href = 'index.php'; // 如果登录成功，重定向到主页
						} else {
							// alert('登录失败，请检查电话号码和密码');
							alert(response);
						}
					}
				});
			});



		});
	</script>
</body>

</html>